<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>详情页</title>
		<link rel="stylesheet" type="text/css" href="./Public/Home/css/content.css"/>
		<link rel="stylesheet" type="text/css" href="./Public/Home/css/common.css"/>
		<script type="text/javascript" src="./Public/Home/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="./Public/Home/js/land.js"></script>
		<script type="text/javascript">
			$(function(){
				$('.image').mouseover(function(){
					$(this).addClass('borderColor').removeClass('image').siblings('#a').removeClass('borderColor').addClass('image');
				})
				$('#con1').click(function(){
					$(this).css({background:"white",borderTop:"2px solid #E2231A"}).siblings('#con2,#con3').css({background:"#EEEEEE",borderTop:"none"});
					$('.con1').show().siblings('.con2,.con3').hide();
				})
				$('#con2').click(function(){
					$(this).css({background:"white",borderTop:"2px solid #E2231A"}).siblings('#con1,#con3').css({background:"#EEEEEE",borderTop:"none"});
					$('.con2').show().siblings('.con1,.con3').hide();
				})
				$('#con3').click(function(){
					$(this).css({background:"white",borderTop:"2px solid #E2231A"}).siblings('#con1,#con2').css({background:"#EEEEEE",borderTop:"none"});
					$('.con3').show().siblings('.con1,.con2').hide();
				})
				$('#jia').click(function(){
					var num = parseInt($('#num').val())+1;
					$('#num').val(num);
				})
				$('#jian').click(function(){
					var num = parseInt($('#num').val())-1;
					if(!num){
						return;
					}
					$('#num').val(num);
				})
				
				$('.images').each(function(){
					var js_this = this;
					var jq_this = $(this);
					js_this.num = $(this).index('.images');
					jq_this.mouseover(function(){
						$('.imgs').css({display:'none'}).eq(js_this.num).css({display:'block'});
					});
				})

				$('.bord').click(function(){
//					console.log($('.bord-box'));
//					return;
					var arr = $(this).attr('value');
					if(arr == 0){
						$(this).css({border:"1px solid #E2231A"}).parent('li').siblings('li').children('a').css({border:"1px solid #ECECEC"}).attr('value','0');
						$(this).parents('ul').addClass('ulli');
						$(this).attr('value','1');
					}else{
						$(this).css({border:"1px solid #ECECEC"});
						$(this).parents('ul').removeClass('ulli');
						$(this).attr('value','0');
					}
					
					var len = $('.ulli').length;
					
					var id = $(this).attr('gaid');
					
					$(this).parents('ul').attr('value',id);

					var gaids = '';
					for(var i=0; i<$('.bord-box').length;i++){
						$v = $(this).parents('.xuanze').find('.bord-box').eq(i).attr('value');
						gaids += $v + ',';
					}
					
					if(len == $('#shop').attr('attrcount')){
						$('#shop').attr('gaids',gaids);
						$.ajax({
							type:"post",
							url:"{{U('./Home/Content/attr')}}",
							data:{gaid:gaids},
							dataType:"json",
							success:function(data){
								var pri = $('#pri').attr('pri');
								var price = parseInt(pri) + parseInt(data);
								$('#pri').html('¥' + price);
							}
						});
					}
				})
				
				$('#shop').click(function(){
					var gid = $(this).attr('gid');
					var gaids = $(this).attr('gaids');
					var num = $('#num').val();
					
					var len = $('.ulli').length;
					if(len == $('#shop').attr('attrcount')){
						$('.shop-box').show();
						$.ajax({
							type:"post",
							url:"{{U('./Home/Content/shop')}}",
							data:{gid:gid,gaids:gaids,num:num},
							dataType:"json",
							success:function(data){
								
							}
						})
					}else{
						alert('规格不全');
					}
				})
				
				$('.x').click(function(){
					$('.shop-box').hide();
				})
			})
		</script>
	</head>
	<body>
		{{include file="../Common/login"}}
		{{include file="../Common/head"}}
		<div class="cateB">
			<ul>
				<li><a href="">首页</a></li>
				<span>&nbsp;>&nbsp;</span>
				<li><a href="">商品详情</a></li>
				<span>&nbsp;>&nbsp;</span>
				{{foreach from="$goodsData" value="$v"}}
				<li>{{$v['gname']}}</li>
				{{endforeach}}
			</ul>
		</div>
		<!--商品选取-->
		{{foreach from="$goodsData" value="$v"}}
		<div class="goods-box">
			<div class="box-left">
				{{foreach from="$v['img']" value="$value"}}
				<a href="javascript:;" class="imgs"><img src="{{$value}}" alt=""/></a>
				{{endforeach}}
				<ul>
					<li>
						<!--<a href="" class="btn"></a>-->
						{{foreach from="$v['img']" key="$k" value="$value"}}
						{{if value="$k eq 0"}}
						<a href="javascript:;" id="a" class="image borderColor"><img class="images" src="{{$value}}"/></a>
						{{else}}
						<a href="javascript:;" id="a" class="image"><img class="images" src="{{$value}}"/></a>
						{{endif}}
						{{endforeach}}
						<!--<a href="javascript:;" class="button"></a>-->
					</li>
					<span> 商品编号：</span>
					<span>{{$v['gnum']}}</span>
					<a href="" class="fenxiang" title="分享">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分享</a>
					<a href="" class="shouc" title="收藏">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收藏</a>
				</ul>
				
			</div>

			<div class="box-right">
				<h1 gname="{{$v['gname']}}">{{$v['gname']}}</h1>
				<h6>
					双核处理器6Y54
					<br />
					Windows 10 家庭版
				</h6>
				<div style="margin-top:20px;" class="pir">
					<div>
						<span>商城价：</span>
						<b id="pri" pri="{{$v['shopprice']}}">¥{{$v['shopprice']}}</b>
					</div>
				</div>
				<div class="xuanze">
					{{foreach from="$goodsAttr" value="$val"}}
					<ul class="bord-box" value="">
						<span>{{$val['aname']}}：</span>
						{{foreach from="$val['son']" value="$value"}}
						<li><a href="javascript:;" class="bord" gaid="{{$value['gaid']}}" value="0">{{$value['goodsvalue']}}</a></li>
						{{endforeach}}
					</ul>
					{{endforeach}}
					<!--<ul>
						<span>套餐类型：</span>
						<li><a href="javascript:;" class="bord" value="0">官方标配</a></li>
						<li><a href="javascript:;" class="bord" value="0">标准套餐</a></li>
						<li><a href="javascript:;" class="bord" value="0">套餐一</a></li>
						<li><a href="javascript:;" class="bord" value="0">套餐二</a></li>
						<li><a href="javascript:;" class="bord" value="0">套餐三</a></li>
					</ul>
					<ul>
						<span>选择服务：</span>
						<li><i></i><a href="javascript:;" class="bord" value="0">联想平板电脑延长1年保修 ￥369 </a><p class="daoneisj"></p></li>
						<li><i></i><a href="javascript:;" class="bord" value="0">联想平板电脑延长1年保修 ￥369 </a><p class="daoneisj"></p></li>
						<li><i></i><a href="javascript:;" class="bord" value="0">联想平板电脑延长1年保修 ￥369 </a><p class="daoneisj"></p></li>
						<li><i></i><a href="javascript:;" class="bord" value="0">联想平板电脑延长1年保修 ￥369 </a><p class="daoneisj"></p></li>
					</ul>-->
				</div>
				<div class="fuk">
					<span>分期付款：</span>
					<h5>此商品支持分期支付，<a href="" style="color: #2FB6FF;">了解分期支付</a></h5>
					<input type="text" name="num" id="num" readonly="" value="1" style="width: 40px;height: 38px;text-align: center;float: left;margin-top: 50px;border: 1px solid #6F6F6F;"/>	
					<input type="button" id="jia" value="+" class="button" style="margin-top: 50px;"/>
					<input type="button" id="jian" value="-" class="button"/>
					<span style="font-weight: 100;">有库存</span>
					<a href="clear.html" class="btn" style="margin-left: 50px;color: #E2231A;">立即购买</a>
					<a href="javascript:;" class="btn" id="shop" gid="{{$v['gid']}}" gaids="" style="background: #E2231A;color: white;" attrcount="{{$attrcount}}">加入购物车</a>
					<div class="shop-box">
						<div class="prompt"><span>提示</span><a href="javascript:;" class="x">×</a></div>
						<div class="pro-box">
							<i></i>
							<span>已成功添加到购物车</span>
							<a href="javascript:;" class="x">继续挑选</a>
							<a href="{{U('./Home/Shopping/index')}}">去购物车</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--商品详细信息-->
		<div class="con-box">
			<div class="con-left">
				<h1>热销榜</h1>
				<ul>
					<li style="border-top: none;">
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
					</li>
					<li>
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
					</li>
					<li>
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
					</li>
					<li>
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
					</li>
				</ul>
				<h1>猜你喜欢</h1>
				<ul>
					<li style="border-top: none;">
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
					</li>
					<li>
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
					</li>
					<li>
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
					</li>
					<li>
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
					</li>
				</ul>
				<h1>看了又看</h1>
				<ul>
					<li style="border-top: none;">
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
						<p>推荐指数：</p><span style="float: left;">71%</span>
					</li>
					<li>
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
						<p>推荐指数：</p><span style="float: left;">71%</span>
					</li>
					<li>
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
						<p>推荐指数：</p><span style="float: left;">71%</span>
					</li>
					<li>
						<a href="" class="img"><img src="./Public/Home/images/con-left.jpg"/></a>
						<a href="" class="words">小新310经典版-500G 机械硬盘</a>
						<span>￥4399</span>
						<p>推荐指数：</p><span style="float: left;">71%</span>
					</li>
				</ul>
			</div>
			<div class="con-right">
				<div class="tap">
					<a href="javascript:;" id="con1">商品详情</a>
					<a href="javascript:;" id="con2">配置信息</a>
					<a href="javascript:;" id="con3">商品评价</a>
				</div>
				<div class="con1">
					{{$v['intro']}}
				</div>
				<div class="peizhi con2">
					<h1>商品编号：{{$v['gnum']}}</h1>
					<div>
						<h2>主体</h2>
						<h3>颜色</h3><h4>金</h4>
						<h3>平台</h3><h4>英特尔</h4>
						<h3>系列</h3><h4>YOGA</h4>
						<h3>型号</h3><h4>YOGA 900S</h4>
					</div>
					<div>
						<h2>主体</h2>
						<h3>颜色</h3><h4>金</h4>
						<h3>平台</h3><h4>英特尔</h4>
						<h3>系列</h3><h4>YOGA</h4>
						<h3>型号</h3><h4>YOGA 900S</h4>
					</div>
					<div>
						<h2>主体</h2>
						<h3>颜色</h3><h4>金</h4>
						<h3>平台</h3><h4>英特尔</h4>
						<h3>系列</h3><h4>YOGA</h4>
						<h3>型号</h3><h4>YOGA 900S</h4>
					</div>
					<div>
						<h2>主体</h2>
						<h3>颜色</h3><h4>金</h4>
						<h3>平台</h3><h4>英特尔</h4>
						<h3>系列</h3><h4>YOGA</h4>
						<h3>型号</h3><h4>YOGA 900S</h4>
					</div>
					<div>
						<h2>主体</h2>
						<h3>颜色</h3><h4>金</h4>
						<h3>平台</h3><h4>英特尔</h4>
						<h3>系列</h3><h4>YOGA</h4>
						<h3>型号</h3><h4>YOGA 900S</h4>
					</div>
					<div>
						<h2>主体</h2>
						<h3>颜色</h3><h4>金</h4>
						<h3>平台</h3><h4>英特尔</h4>
						<h3>系列</h3><h4>YOGA</h4>
						<h3>型号</h3><h4>YOGA 900S</h4>
					</div>
				</div>
				<div class="con3">
					
				</div>
			</div>
		</div>
		{{endforeach}}
		{{include file="../Common/foot"}}
	</body>
</html>
